<!-- <script lang="ts">
export default {
  name: 'App'  //组件命名
}
</script> -->

<script setup lang="ts">
import { getDataFn } from "@/api/getPro";
import { ref,type Ref ,onMounted,computed } from "vue";
import { showToast} from 'vant'

const proList:Ref<any[]> = ref([])
const proListGrid:Ref<any[]> = ref([])
const icon1:Ref<string> = ref('icon-shengxianguoshu')
const location:Ref<string>=ref('杭州九堡')
const value:Ref<string>=ref('')
const loading:Ref<boolean> = ref(false)
  

  const searchList = computed(() => {
    if(value.value == ''){
      return proList.value
    } else {
    return proList.value.filter(item => item.shopname.includes(value.value))
    }
  })
  //npm install @types/amap-js-api --save-dev  安装

// const AMap:Ref<any> = ref(null);
  // const AMap: Ref<typeof window.AMap> = ref(window.AMap);

// console.log(window);

// function getCurrentLocation(){
//   // var map = new window.AMap.Map('container', {
//   //       zoom: 11,
//   //   });
//   // console.log(666666,map.getCenter());
  
//   window.AMap.plugin('AMap.CitySearch', function () {
//   var citySearch = new window.AMap.CitySearch()
//   citySearch.getLocalCity(function (status, result) {
//     console.log(1111111,status,result);
    
//     if (status === 'complete' && result.info === 'OK') {
//       // 查询成功，result即为当前所在城市信息
//       console.log(result);
      
//     }
//   })

// })


    // // 定位
    // const geolocation = new window.AMap.Geolocation({
    //     enableHighAccuracy: true, // 是否使用高精度定位，默认:true
    //     timeout: 10000,          // 超过10秒后停止定位，默认：无穷大
    //     // maximumAge: 0,           // 定位结果缓存0毫秒，默认：0
    //     buttonOffset: new window.AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    //     zoomToAccuracy: true      // 定位成功后是否自动调整地图视野到定位点
    //   });

    //   //绑定事件
    //   geolocation.getCurrentPosition((status,result) => {
    //     if(status=='complete'){
    //       location.value =  result.formattedAddress;//获取当前位置信息
    //       console.log(location.value);      
    //     }  else {
    //       location.value = '无法获取定位信息'
    //     }
    //   })
// }

onMounted(() => {
  // AMap.value = (window as any).AMap
  const map = new window.AMap.Map('container', {
        zoom: 10,  //放大级别
    });
  
    //js中获取dom元素
    // document.getElementById('adcode').innerHTML = map.getCenter()
   
    // location.value = map.getCenter()

  getDataFn().then(res => {
    console.log(res);
    proList.value = res
    console.log(proList.value);
    proListGrid.value = res.slice(0, 9)

  })

   // 调用获取定位函数
  //  if (typeof AMap !== 'undefined') {
  //       getCurrentLocation(); // 确保 AMap 已加载
  //   } else {
  //       console.error("AMap is not loaded.");
  //   }
})


const onRefresh = ()=> {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        // count.value++;
      }, 1000);
    };


</script>
<template>
    <main>
      <div id="container"></div>
      <header class="header">
  
        <!-- 定位  购物车  阿里巴巴图标使用-->
         <p class="mapDiv">
          <i class="iconfont icon-ditu_dingwei_o mapIcon"> <span >{{location }} <van-icon name="arrow-down" /></span></i>
          <!-- <span style="color:white">杭州九堡<van-icon name="arrow-down" /></span> -->
          <i @click="$router.push('/order')" class="iconfont icon-gouwuche"></i>
         </p>
        
        <!-- 搜索框 -->
        <van-search v-model="value" shape="round" style="width: 320px;" placeholder="请输入搜索关键词" />
        <!-- 历史搜索记录 -->

      </header>

      <section class="procontent">
        <!-- 宫格    这里的样式不如自己搭建 搭建9个循环  最后一个是全部   后面UI会给图标（带背景色的） 不用太纠结图标 这种细节 不用自己搞出来-->
        <van-grid :border="false" round icon-size="20" :column-num="5" >
   <van-grid-item @click="$router.push('/kind')" v-for="icon in proListGrid" :key="icon.id" :text="icon.category" >
    <template #icon>
      <div class="iconBox" :style="{backgroundColor:icon.color,opacity:0.2,borderRadius:'50%'}">
      <i :class="{
    'iconfont': true,  //fontSize 不能用font-size,要用加引号  ,backgroundColor:icon.color,opacity:0.3`
    ['icon-' +icon.icon]: true}" :style="{color: icon.color,fontSize: '25px'} "></i>
    </div>
      <!-- <i :class="'iconfont ' + icon1" style="color: red"></i> -->
      <!-- <i class="iconfont icon-icon-cake" style="color: orange"></i>  -->
    </template>
    </van-grid-item>
    <van-grid-item @click="$router.push('/kind')" text="全部">
    <template #icon> 
      <!-- background-color:rgba(108, 108, 226, 0.3)  背景色加2个属性就可以了 background-color:#6c6ce2; opacity:0.3  ;？ 不行会覆盖掉图片只能用rgba -->
      <i class="iconfont icon-quanbu" style="color:#6c6ce2;font-size: 30px; background-color:rgba(108, 108, 226, 0.3) ;"></i>
    </template>
    </van-grid-item>
  </van-grid>

        <!-- 列表 -->
         <!-- 下拉刷新 -->
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
  
        <van-card  @click="$router.push({name:'shop',query:{id:item.id}})" v-for="item in searchList" :key="item.id"
  :num="item.salenum + '月销量'"
  :price="item.avgprice"
  :desc="item.shopname"
  :title="item.salenum"
  :thumb="item.img"
>
  <template #tags>
    <van-tag plain type="primary">{{item.category}}</van-tag>
    <van-tag plain type="primary">{{item.score}}评分</van-tag>
  </template>
  <template #footer>
    <van-button size="mini">{{item.score}}综合评分</van-button>
  </template>
</van-card>
</van-pull-refresh>

      </section>
    </main>
  
  
  </template>

  <style lang="scss" scoped>
  @function hex-to-rgb($hex) {
  $r: red($hex);
  $g: green($hex);
  $b: blue($hex);
  @return $r + ',' + $g + ',' + $b;
}
  .header{
     height: 8rem;
     width: 100%;
     background: linear-gradient(to right, #f1963e, #ee7950);
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     padding: 5px 10px;
  }
  .mapDiv{
   display: flex;
   justify-content: space-between;
  }

  .mapIcon{
    font-size: 1.5rem;
    color: white;
  }
  .icon-gouwuche{
    font-size: 1.3rem;
    color: white;
  }

  .van-search{
    background-color: rgba(0,0,0,0);
  }

  .procontent{
    overflow: auto;  //自身内滚动
    height: 1000px;
  }

  .icon-quanbu {
    // background-color:#6c6ce2 ;
    // opacity: 0.2;
    font-size: 2rem;
     width: 42px;
    height: 40px;
    border-radius: 50%;
     text-align: center;
    line-height: 40px;
  }
  


  .iconfont{
    margin-bottom: 10px;
    display: inline-block;  //inline-block 使得iconfont可以设置颜色和距离
    // background: hex-to-rgb('#59c175'); //rgba(89, 193, 117, 0.3);//rgba(hex-to-rgb('#59c175'), 0.5); //scss怎么将背景色改为rgba
    // width: 42px;
    // height: 40px;
    // border-radius: 50%;
    // text-align: center;
    // line-height: 40px;
    z-index: 9999;
  }

  .iconBox{
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
  }


  //地图展示 必须设置宽高
  #container {
  width: 100%;
  height: 50px;
}
 
</style>